<template>
  <div class="history">
    <div class="history-title">历史会话</div>
    <div class="history-wrapper">
      <div class="history-list">
        <div class="history-item" v-for="item in chatList" :key="item.id" @click="toChat(item)">
          <img class="message-icon" src="@/assets/news/消息未选中.png" alt="">
          <div class="history-item-name">{{ item.name }}</div>
          <div class="history-item-handle">
            <div class="handle-icon edit" @click.stop="clickChatItem(item)"/>
            <div class="handle-icon del" @click.stop="deleteChatItem(item)"/>
          </div>
        </div>
        <img v-if="chatList.length === 0" src="@/assets/news/empty.png" class="empty" />
      </div>
    </div>
  </div>
  <div class="full-modal" v-if="chatItemDialog">
    <div class="full-modal-box f-r a-c j-c">
      <div class="modal-panel">
        <h3>Rename Conversation</h3>
        <div class="sub-title">Conversation name</div>
        <el-input class="input-box" v-model="chatItemEdit.name" placeholder="Please input conversation name"></el-input>
        <div class="modal-button">
          <el-row :gutter="16">
            <el-col :span="12">
              <el-button type="primary" @click="confirmChatName">Save</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" plain @click="chatItemDialog = false">Cancel</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
  <div class="full-modal delete-modal" v-if="chatItemDeleteDialog">
    <div class="full-modal-box f-r a-c j-c">
      <div class="modal-panel">
        <div class="f-r a-c j-c">
          <img src="@/assets/异常.png" style="width: 24px;height: 24px;margin-right: 8px" alt="">
          <h3 style="font-size: 18px">Delete conversation</h3>
        </div>
        <div class="sub-title2">Are you sure you want to delete this conversation？</div>
        <div class="modal-button">
          <el-row :gutter="16">
            <el-col :span="12">
              <el-button type="primary" @click="confirmDeleteChatItem">Confirm</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" plain @click="chatItemDeleteDialog = false">Cancel</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref} from "vue";
import { useStore } from "vuex";
const store = useStore();
import { useRouter } from "vue-router";
const router = useRouter();
import axios from "axios";
import {ElMessage} from "element-plus";
const API_URL = 'https://dify.cozebuy.com/v1'
const HEADERS = {
  'Authorization': 'Bearer app-FbPk8srFFjbg4FWy6nSqEE1R',
  'Content-Type': 'application/json'
}
const chatList = ref([])

const getChatList = () => {
  axios({
    url: API_URL + '/conversations',
    params: {
      limit: 100,
      user: store.getters.token
    },
    method: 'get',
    headers: HEADERS
  }).then(res => {
    chatList.value = res.data.data
  })
}

const renameChatItem = (auto_generate = false, isHandle = true) => {
  let data = {
    user: store.getters.token
  }
  if (auto_generate) {
    data.auto_generate = true
  } else {
    data.name = chatItemEdit.value.name
  }
  axios({
    url: `${API_URL}/conversations/${chatItemEdit.value.id}/name`,
    data,
    method: 'post',
    headers: HEADERS
  }).then(res => {
    if (isHandle) {
      ElMessage.success('Rename success')
    }
    getChatList()
  })
}
const chatItemEdit = ref({})
const chatItemDialog = ref(false)
const clickChatItem = (chatItem) => {
  chatItemEdit.value = {
    ...chatItem
  }
  chatItemDialog.value = true
}
const confirmChatName = () => {
  chatItemDialog.value = false
  renameChatItem()
}
const chatItemDeleteDialog = ref(false)
const deleteChatItem = (item) => {
  chatItemDeleteDialog.value = true
  chatItemEdit.value = {
    ...item
  }
}
const confirmDeleteChatItem = () => {
  axios({
    url: API_URL + '/conversations/' + chatItemEdit.value.id,
    method: 'delete',
    data: {
      user: store.getters.token
    },
    headers: HEADERS
  }).then(res => {
    chatItemDeleteDialog.value = false
    ElMessage.success('Delete success')
    getChatList()
  })
}
const toChat = (item) => {
  router.push({
    path: '/chat/message/' + item.id + '/' + item.name
  })
}
getChatList()
</script>

<style scoped lang="scss">
.desktop {
  .history {
    padding-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding-bottom: 100px;
    height: 100%;
    .history-title {
      margin-bottom: 48px;
      font-size: 28px;
      color: rgba(0,0,0,0.85);
      text-align: center;
    }
    .history-wrapper {
      flex-grow: 1;
      overflow: auto;
      padding-right: 24px;
      position: relative;
      .empty {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 180px;
        transform: translate(-50%, -50%);
      }
    }
    .history-list {
      width: 800px;
      position: relative;
      min-height: 100%;
      .history-item {
        margin: 16px 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 0.5px solid #d6d6d6;
        border-radius: 6px;
        padding: 0 16px;
        height: 46px;
        justify-content: space-between;
        .message-icon {
          width: 16px;
          height: 16px;
        }
        .history-item-name {
          flex-grow: 1;
          margin-left: 16px;
          font-size: 14px;
          color: #000000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .history-item-handle {
          display: flex;
          align-items: center;
          margin-left: 16px;
        }
        .handle-icon {
          cursor: pointer;
          width: 16px;
          height: 16px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          margin-left: 12px;
        }
        .edit {
          background-image: url("~@/assets/news/edit.png");
        }
        .del {
          background-image: url("~@/assets/news/del.png");
        }
        &:hover {
          .edit {
            background-image: url("~@/assets/news/edit_active.png");
          }
          .del {
            background-image: url("~@/assets/news/del_active.png");
          }
        }
      }
    }
  }
  .full-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    .full-modal-box {
      padding: 16px;
      width: 100%;
      height: 100%;
    }
    .modal-panel {
      width: 100%;
      max-width: 448px;
      border-radius: 16px;
      padding:30px 24px;
      text-align: left;
      vertical-align: middle;
      box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;
      transition-property: all;
      transition-timing-function: cubic-bezier(.4,0,.2,1);
      transition-duration: .15s;
      background-color: #ffffff;
      h3 {
        font-size: 18px;
        color: #101828;
        text-align: center;
      }
      .sub-title {
        font-size: 14px;
        margin-top: 24px;
        color: #101828;
        margin-bottom: 8px;
      }
      .sub-title2 {
        opacity: 0.5;
        font-size: 16px;
        color: #000000;
        line-height: 26px;
        font-weight: 400;
        margin-top: 24px;
      }
      .input-box {
        background: #FFFFFF;
        height: 40px;
        display: flex;
        align-items: center;
        position: relative;
        .el-input__wrapper {
          border-radius: 8px;
        }
        &.focus {
          border-color: var(--primary-color);
        }
        input::placeholder {
          opacity: 0.5;
          font-family: Arial;
          font-size: 16px;
          color: #000000;
          letter-spacing: 0;
          line-height: 22px;
          font-weight: 400;
        }
        .el-input__inner {
          font-family: Arial;
          font-size: 16px;
          color: #000000;
          letter-spacing: 0;
          line-height: 22px;
          font-weight: 400;
        }
      }

    }
    .modal-button {
      margin-top: 24px;
      width: 100%;
      .el-button {
        width: 100%;
      }
    }
  }
}

</style>
